<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实现一个Dropdown控件</title>
		<style type="text/css">
			body,div,ul,li{
				margin: 0;
				padding: 0;
			}
			
			body{
				padding: 8px;
			}
			
			.dropdown a{
				text-decoration: none;
				color: #000;
				display: inline-block;
			}
			
			.dropdown>a{
				border: 1px solid #000;
				padding: 6px 12px;
			}
			
			.dropdown-menu{
				list-style: none;
				width: 200px;
				height: 0;
				opacity: 0;
				overflow: hidden;
				border:1px solid #000;
				box-shadow: 5px 5px 6px #000;
			}
			
			.dropdown-menu a{
				padding: 6px 12px;
				width: 160px;
			}
			
			.dropdown-menu li:hover{
				background-color: #ddd;
			}
		</style>
		<script src="js/jquery-1.12.4.js" type="text/javascript">
			
		</script>
	</head>
	<body>
		<div class="dropdown">
			<a href="#" data-trigger="dropdown">Drop down</a>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else</a></li>
				<li><hr /></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div>
		
		<script type="text/javascript">
			// 1. 找到dropdown,绑定单击事件
			$('.dropdown>a[data-trigger=dropdown]').click(function(e){
				e.preventDefault();
				// 2. 在单击事件里,找到a后面的元素ul,控制ul的高度和透明度
				var $a = $(this);
				var $ul = $a.next();
				
				if(parseInt($ul.css('height')) > 0 ){
					$ul.css({
						'height': 0,
						'opacity': 0
					});
				}else{
					$ul.css({
						'height': 153,
						'opacity': 1
					});
				}
			});
			
			// 3. dropdown绑定鼠标的移入事件和移出事件
			$('.dropdown').mouseover(function(e){
				// 4. 控制ul的高度和透明度
				// var $a = $(this);
				// var $ul = $a.next();
				var $div = $(this);
				var $ul = $div.children().last();
				$ul.css({
					'height': 153,
					'opacity': 1
					
				});
				
			}).mouseout(function(e){
				var $div = $(this);
				var $ul = $div.children().last();
				$ul.css({
					'height': 0,
					'opacity': 0
				});
			});
			
			
			
		</script>
	</body>
</html>
